<script lang="ts">
/**
 * @author wyr
 * @description #19509 【组件】单个图片 - card
 * @param width 宽度
 * @param height 高度
 * @param path 图片路径
 * @param id id
 * @param checked 是否选中
 * @param name 图片名称
 * @param teamId 所在组id
 * @event emit('on-change-name', this.id, this.valueName) 改名操作--传id和改名后的值valueName
 * @event emit('on-href', this.id) 链接操作--传id
 * @event emit('on-team', this.id, this.valueTeamId) 分组操作--传id和重新分组后的值valueTeamId
 * @event emit('on-delete', this.id)删除操作--传id
 * @event emit('on-big-pic', this.id)点击查看大图
 * @event emit('on-download')下载
 */
import { Component, Vue, Prop, Watch } from "vue-property-decorator";
import { EventBus } from "feok-lib";
import GroupSelect from "@/components/GroupSelect";

@Component({
  components: {
    GroupSelect
  }
})
export default class PicCard extends Vue {
  @Prop({ type: Number }) public id!: number; // id
  @Prop({ type: Number, default: 140 }) public width!: number; // 宽度
  @Prop({ type: Number, default: 140 }) public height!: number; // 高度
  @Prop({ type: String }) public path!: string; // 图片路径
  @Prop({ type: Boolean, default: false }) public checked!: boolean; // 是否选中
  @Prop({ type: String }) public name!: string; // 图片名称
  @Prop({ type: Number }) public teamId!: number; // 所在组id

  public value: boolean = this.checked; // 选中
  public valueName: string = this.name; // 名称
  public valueTeamId: number = this.teamId; // 分组
  public visible1: boolean = false; // 开光
  public visible2: boolean = false; // 开光
  public visible3: boolean = false; // 开光
  public visible4: boolean = false; // 开光
  public teamList: any = []; // 分组列表

  @Watch("checked")
  public dataWatch(val: any, oldVal: any) {
    this.value = val;
  }

  public changeVal(val: boolean) {
    this.$emit("on-change-checkbox", val, this.id);
  }

  // 复制链接
  public doCopy() {
    this.$copyText(this.path).then(
      (e: any) => {
        EventBus.$emit("success", `复制成功！`);
        this.$emit("on-href", this.id);
      },
      (e: any) => {
        EventBus.$emit("error", `复制失败！`);
      }
    );
  }

  // 改名
  public handleChangeName() {
    this.$emit("on-change-name", this.id, this.valueName);
    this.visible1 = false;
  }

  // 分组
  public handleTeam() {
    this.$emit("on-team", this.id, this.valueTeamId);
    this.visible3 = false;
  }

  // 删除
  public handleDelete() {
    this.$emit("on-delete", this.id);
    this.visible4 = false;
  }

  // 下载
  public download() {
    this.$emit("on-download");
  }
}
</script>

<template>
  <div class="pic-card">
    <div ref="pic" :style="{ width: `${width}px`, height: `${height}px`}">
      <template v-if="path">
        <img v-lazy="path" width="100%" height="100%" @click="$emit('on-big-pic',id)" />
      </template>
    </div>
    <div class="pic-card_title">
      <el-checkbox v-model="value" @change="changeVal"></el-checkbox>
      <span class="pic-card_title_name">{{name}}</span>
    </div>

    <div class="pic-card_fn">
      <el-popover placement="bottom" width="325" trigger="click" v-model="visible1">
        <p>修改名称</p>
        <el-input v-model="valueName" placeholder="名称" style="margin:8px 0;"></el-input>
        <div style="text-align: right; margin: 0">
          <el-button size="mini" type="text" @click="visible1 = false">取消</el-button>
          <el-button type="primary" size="mini" @click="handleChangeName">确定</el-button>
        </div>
        <span class="pic-card_fn_name" slot="reference">改名</span>
      </el-popover>|
      <span class="pic-card_fn_name" slot="reference" @click="doCopy">链接</span>
      |
      <el-popover placement="bottom" width="325" trigger="click" v-model="visible3">
        <template v-if="visible3">
          <p>选择分组</p>
          <GroupSelect v-model="valueTeamId" :query="{type: 'IMAGE'}" style="margin:6px 0;"></GroupSelect>
          <div style="text-align: right; margin: 0">
            <el-button size="mini" type="text" @click="visible3 = false">取消</el-button>
            <el-button type="primary" size="mini" @click="handleTeam">确定</el-button>
          </div>
        </template>
        <span class="pic-card_fn_name" slot="reference">分组</span>
      </el-popover>|
      <el-popover placement="bottom" width="325" trigger="click" v-model="visible4">
        <p>确定删除该图片？</p>
        <span>若删除，不会对目前已使用该图片的相关业务造成影响。</span>
        <div style="text-align: right; margin: 0">
          <el-button size="mini" type="text" @click="visible4 = false">取消</el-button>
          <el-button type="primary" size="mini" @click="handleDelete">确定</el-button>
        </div>
        <span class="pic-card_fn_name" slot="reference">删除</span>
      </el-popover>
    </div>
    <div class="pic-card_fn" style="margin-top:4px;">
      <span class="pic-card_fn_name" slot="reference" @click="download">下载</span>
    </div>
  </div>
</template>

<style lang="less">
.pic-card {
  &_title {
    width: 100%;
    margin: 10px 0 12px;
    &_name {
      display: inline-block;
      margin-left: 3px;
      font-size: 14px;
      width: 120px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      line-height: 17px;
      vertical-align: bottom;
    }
  }
  img {
    cursor: pointer;
  }
  &_fn {
    font-size: 12px;
    span {
      color: #409eff;
      cursor: pointer;
    }
  }
  .pic-card_fn_name {
    &:hover {
      text-decoration: underline;
    }
  }
}
</style>